﻿@using RuoVea.ExUtil;
@using RuoVea.ExUtil;

@using Microsoft.Extensions.Options

@{
    ViewData["Title"] = "作业";
    string JobRootUrl = "";
    Layout = "";
}
<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>@ViewData["Title"] - MES管理系统</title>
    <link href="/elementui/index.css" rel="stylesheet" />
    <link href="/elementui/index.extend.css?v=22" rel="stylesheet" />
    <style scoped>


    </style>
</head>
<body>

  
    <div id="main" v-cloak>


        <el-main>

            <el-row type="flex" align="center">
                <el-col :span="24" style="padding: 10px 0 0 0;">
                    <el-table :data="tableData"
                              border stripe style="width: 100%;" size="small" stripe="true"
                              empty-text="sdsadadadadadadasda"
                              v-loading="loading">
                        <el-table-column type="index" align="center">
                        </el-table-column>
                        <el-table-column v-for="(column, index) in columns"
                                         :key="index"
                                         :prop="column.prop"
                                         :label="column.label"
                                         :align="column.align" 
                                         :fixed="column.fixed"
                                         :show-overflow-tooltip="column.showOverflowTooltip"
                                         :width="column.width"></el-table-column>

                        <el-table-column width="260" label="操作" fixed="right">
                            <template slot-scope="scope">
                                <slot name="header"></slot>
                                <el-tooltip content="查看记录" placement="bottom">
                                    <el-button type="default" size="mini" icon="el-icon-view" v-on:click="logDialog(scope.$index, scope.row)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="修改记录" placement="bottom">
                                    <el-button type="primary" size="mini" icon="el-icon-edit" v-on:click="editDialogForm(scope.$index, scope.row)"></el-button>
                                </el-tooltip>
                                <el-tooltip content="删除记录" placement="bottom">
                                    <el-button type="danger" size="mini" icon="el-icon-delete-solid" v-on:click="handleDelete(scope.$index, scope.row)"></el-button>
                                </el-tooltip>
                                <slot name="footer"></slot>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @@size-change="handleSizeChange" @@current-change="handleCurrentChange" :current-page="tableQuery.pageNo" :page-sizes="tableQuery.pageSizes" :page-size="tableQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableQuery.totalRows"></el-pagination>
                </el-col>
            </el-row>
        </el-main>
        

    </div>

    <script type="text/javascript" src="/vue/vue.js?v=2.0"></script>
    <script type="text/javascript" src="/vue/vue-i18n.min.js?v=2.0"></script>
    <script type="text/javascript" src="/elementui/index.js"></script>
    <script type="text/javascript" src="/elementui/index.extend.js?v=@RuoVea.ExUtil.Time.Time.Now.GetTimeStamp()"></script>
    <script type="text/javascript" src="/vue/axios.min.js"></script>
    <script type="text/javascript" src="/vue/axios.min.extend.js?v=@RuoVea.ExUtil.Time.Time.Now.GetTimeStamp()"></script>
    <script>
        Vue.component('ElExtendBody', {
            props: {
                logoSrc: String,
                logoTitle: String,
                activeIndex: { type: String, },
                menuData: Array,
                userName: String,
                userAvatar: String,
                loginOutTxt: String,
                handleLogout: Function,
            },
            template: ``
        });
        var $taskVue = new Vue({
            el: "#main",
            data() {
                return {
                    tableData: [
                        {
                            date: '2016-05-03',
                            name: 'Tom',
                            address: 'No. 189, Grove St, Los Angeles',
                        }, {
                            date: '2016-05-02',
                            name: 'Tom2',
                            address: 'No. 189, Grove St, Los Angeles2',
                        }, {
                            date: '2016-05-03',
                            name: 'Tom',
                            address: 'No. 189, Grove St, Los Angeles',
                        }, {
                            date: '2016-05-02',
                            name: 'Tom2',
                            address: 'No. 189, Grove St, Los Angeles2',
                        }, {
                            date: '2016-05-03',
                            name: 'Tom',
                            address: 'No. 189, Grove St, Los Angeles',
                        }, {
                            date: '2016-05-02',
                            name: 'Tom2',
                            address: 'No. 189, Grove St, Los Angeles2',
                        },{
                            date: '2016-05-03',
                            name: 'Tom',
                            address: 'No. 189, Grove St, Los Angeles',
                        }, {
                            date: '2016-05-02',
                            name: 'Tom2',
                            address: 'No. 189, Grove St, Los Angeles2',
                        },{
                            date: '2016-05-03',
                            name: 'Tom',
                            address: 'No. 189, Grove St, Los Angeles',
                        }, {
                            date: '2016-05-02',
                            name: 'Tom2',
                            address: 'No. 189, Grove St, Los Angeles2',
                        }, 
                    ],
                    columns: [
                        {
                            prop: "date",
                            label: "日期",
                            width: 180
                        },
                        {
                            prop: "name",
                            label: "姓名", align: "center",
                            width: 180
                        },
                        {
                            prop: "address",showOverflowTooltip:true,
                            label: "地址"
                        },
                        // {
                        //     prop: "action",
                        //     label: "操作",
                        //     width: 200,
                        //     type: "template",
                        //     template: `<el-button type="primary" size="small" @@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        //      <el-button type="danger" size="small" @@click="handleDelete(scope.$index, scope.row)">删除</el-button>`
                        // }
                    ],
                    loading: false,

                    tableQuery: {
                        pageNo: 1,
                        pageSize: 10,
                        pageSizes:[10, 20, 30, 40, 50],
                        totalRows: 0,
                       
                    },

                }
            },
            created() {
                // setInterval(() => { this.OnLoadJobs(); }, 10000);
            },
            mounted: function () {
                // this.OnLoadJobs();
            },
            methods: {
                handleDelete(index, row) {
                    var that = this;
                    this.$confirm('确定删除此任务?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => {
                        this.$http("@("/" + JobRootUrl + "/remove/")" + row.id).then(function (res) {
                            if (res.data.code == 200) {
                                that.$message({ message: res.data.message, center: true, type: 'success' });
                                rows.splice(index, 1);
                                that.loadData();
                            } else {
                                that.$message({ message: res.data.message, center: true, type: 'error' });
                            }
                        });
                    });
                },
                // submitForm() {
                //     this.$refs.formRef.validate((valid) => {
                //         if (valid) {
                //             alert('表单验证成功!');
                //             // 表单提交逻辑
                //         } else {
                //             console.error('表单验证失败!');
                //             return false;
                //         }
                //     });
                // },
                submitForm() {
                    var that = this;
                    that.$refs["dialogForm"].validate((valid) => {
                        if (valid) {
                            this.$http.post("@("/" + JobRootUrl + "/jobsave")", that.dialogForm).then(function (res) {
                                if (res.data.code == 200) {
                                    ELEMENT.MessageBox.alert(res.data.message, "系统信息", { type: 'success', callback: () => { that.loadData(); that.dialogForm = that.dialogInitForm; that.dialogFormVisible = false; } });
                                } else {
                                    ELEMENT.MessageBox.alert(res.data.message, "系统信息", { type: 'info', callback: () => { } });
                                }
                            });
                        }
                    });
                },
                handleEdit(index, row) {
                    // 编辑操作的逻辑
                },
                handleSizeChange(val) { var that = this; that.tableQuery.pageNo = 1; that.tableQuery.pageSize = val; that.loadData(); },
                handleCurrentChange(val) { var that = this; that.tableQuery.pageNo = val; that.loadData(); },

                loadData() {
                    var that = this;
                    that.loading = true;
                    this.post("@("/jobList")", that.tableQuery)
                        .then(function (res) {
                            that.tableData = res.data.data.rows;
                            that.tableQuery.totalRows = res.data.data.totalRows;
                            that.loading = false;
                        }).catch(function (res) { that.loading = false; });
                },


                addDialogForm() {
                    var that = this;
                    that.dialogFormVisible = true; that.dialogForm = null;
                    that.dialogForm = that.dialogInitForm;
                },
                editDialogForm(index, row) {
                    var that = this;
                    that.dialogFormVisible = true;
                    that.dialogForm = that.dialogInitForm;
                    axios("@("/" + JobRootUrl + "/getjob/")" + row.id).then(function (res) { if (res.data.code == 200) { that.dialogForm = res.data.data; } });
                },
                logDialog(index, row) { var that = this; window.location.href = "@("/" + JobRootUrl + "/log?id=")" + row.id; },
               
                
            },
            filters: {
                scheduleTypeTitle(data) {
                    return data.scheduleTypeText + ":" + data.runTypeText;
                }
            }
        });
    </script>
</body>
</>
